﻿import { Component } from '@angular/core';
@Component({
  selector: 'sidebar',
  template: `
  <div class="sidebar">
    <nav class="sidebar-nav">
      <form>
        <div class="form-group p-h mb-0">
          <input type="text" class="form-control" aria-describedby="search" placeholder="搜索...">
        </div>
      </form>
      <ul class="nav">
        <li class="nav-title">
          Dashboard
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="fa fa-dashboard"></i> Dashboard <span class="badge badge-info">NEW</span></a>
        </li>
        
        <li class="divider"></li>
        <li class="nav-title">
          UI Elements
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-tags"></i> Components</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/buttons']"><i class="fa fa-tag"></i> Buttons</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/social-buttons']"><i class="fa fa-tag"></i> Social Buttons</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/cards']"><i class="fa fa-tag"></i> Cards</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/forms']"><i class="fa fa-tag"></i> Forms</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/modals']"><i class="fa fa-tag"></i> Modals</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/switches']"><i class="fa fa-tag"></i> Switches</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tables']"><i class="fa fa-tag"></i> Tables</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tabs']"><i class="fa fa-tag"></i> Tabs</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/grid']"><i class="fa fa-tag"></i> Grid</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-star"></i> Icons</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/font-awesome']"><i class="fa fa-star-o"></i> Font Awesome</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/glyphicons']"><i class="fa fa-star-o"></i> Glyphicons</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/glyphicons-filetypes']"><i class="fa fa-star-o"></i> Filetypes</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/icons/glyphicons-social']"><i class="fa fa-star-o"></i> Glyphicons Social</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-edit"></i> Forms</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/forms/basic-forms']"><i class="fa fa-edit"></i> Basic Forms</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/forms/advanced-forms']"><i class="fa fa-edit"></i> Advanced Forms</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-bolt"></i> Plugins</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/plugins/calendar']"><i class="fa fa-calendar"></i> Calendar</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/plugins/draggable-cards']"><i class="fa fa-arrows"></i> Draggable Cards</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/plugins/loading-buttons']"><i class="fa fa-location-arrow"></i> Loading Buttons</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/plugins/spinners']"><i class="fa fa-spinner"></i> Spinners</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/widgets']"><i class="fa fa-puzzle-piece"></i> Widgets <span class="badge badge-info">NEW</span></a>
        </li>
        <li class="divider"></li>
        <li class="nav-title">
          Extras
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-star-o"></i> Pages</a>
          <ul class="nav-dropdown-items">
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/login']"><i class="fa fa-star-o"></i> Login</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/register']"><i class="fa fa-star-o"></i> Register</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/404']"><i class="fa fa-star-o"></i> Error 404</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLinkActive="active" [routerLink]="['/pages/500']"><i class="fa fa-star-o"></i> Error 500</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-dropdown" routerLinkActive="open">
          <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-database"></i> UI Kits</a>

          <ul class="nav-dropdown-items">
            <li class="nav-item nav-dropdown" routerLinkActive="open">
              <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-comments-o"></i> Invoicing</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" routerLinkActive="active" [routerLink]="['/uikits/invoicing/invoice']"><i class="fa fa-comments-o"></i> Invoice</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav-dropdown-items">
            <li class="nav-item nav-dropdown" routerLinkActive="open">
              <a class="nav-link nav-dropdown-toggle" href="#"><i class="fa fa-comments-o"></i> Email</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" routerLinkActive="active" [routerLink]="['/uikits/email/inbox']"><i class="fa fa-comments-o"></i> Inbox</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLinkActive="active" [routerLink]="['/uikits/email/message']"><i class="fa fa-comments-o"></i> Message</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" routerLinkActive="active" [routerLink]="['/uikits/email/compose']"><i class="fa fa-comments-o"></i> Compose</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="divider m-h"></li>
        <li class="nav-title">
          Labels
        </li>
        <li class="nav-item hidden-cn">
          <a class="nav-label" href="#"><i class="fa fa-circle text-danger"></i> Label danger</a>
        </li>
        <li class="nav-item hidden-cn">
          <a class="nav-label" href="#"><i class="fa fa-circle text-info"></i> Label info</a>
        </li>
        <li class="nav-item hidden-cn">
          <a class="nav-label" href="#"><i class="fa fa-circle text-warning"></i> Label warning</a>
        </li>
        
      </ul>
    </nav>
  </div>`
})
export class SidebarComponent {
    constructor() { }
    ngOnInit(): void {

    }
}

